<template>
  <div>
    <div class="buy">
      <!-- 限时购左边 -->
      <div class="buy-left">
        <div class="time">
          <span class="time-text">限时购</span>
          <!-- 倒计时 -->
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
        <!-- 两个商品 -->
        <div class="commodity">
          <div class="commodity-left">
            <img :src="commodity1" alt="" />
            <span class="price">16.9</span>
            <span class="price-r">19.9</span>
          </div>
          <div class="commodity-right">
            <img :src="commodity2" alt="" />
            <span class="price">16.9</span>
            <span class="price-r">19.9</span>
          </div>
        </div>
      </div>
      <!-- 拼团右边 -->
      <div class="buy-right">
        <span class="time-text">拼团</span>
        <div class="commodity">
          <div class="commodity-left">
            <img :src="commodity3" alt="" />
            <span class="price">16.9</span>
            <span class="price-r">19.9</span>
          </div>
          <div class="commodity-right">
            <img :src="commodity4" alt="" />
            <span class="price">16.9</span>
            <span class="price-r">19.9</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commodity1: "http://81.68.133.139:3000/images/store/time-limit1.png",
      commodity2: "http://81.68.133.139:3000/images/store/time-limit2.png",
      commodity3: "http://81.68.133.139:3000/images/store/group-booking1.png",
      commodity4: "http://81.68.133.139:3000/images/store/group-booking2.png",
      time: "",
    };
  },
  // 商品限时购的倒计时
  created() {
    this.time =
      (24 - new Date().getHours()) * 60 * 60 * 1000 +
      (60 - new Date().getMinutes()) * 60 * 1000 +
      (60 - new Date().getSeconds()) * 1000;
  },
};
</script>
<style lang="less">
.buy {
  width: 100%;
  background: #f8f8f8;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 10px;
  .buy-left {
    width: 48%;
    box-sizing: border-box;
    background: #fff;
    padding: 10px;
    .time {
      display: flex;
      justify-content: space-around;
    }
  }
  .buy-right {
    width: 48%;
    box-sizing: border-box;
    background: #fff;
    padding: 10px;
  }
}
.time-text {
  font-size: 16px;
  font-weight: 600;
}
.commodity {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;

  .commodity-left {
    img {
      width: 60px;
      height: 60px;
      padding-bottom: 10px;
    }
  }
  .commodity-right {
    img {
      width: 60px;
      height: 60px;
      padding-bottom: 10px;
    }
  }
}
// 倒计时样式
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
// 四个框框价格
.price {
  font-size: 15px;
  color: #ee0a24;
  font-weight: 600;
}
.price-r {
  color: #adacb1;
  text-decoration: line-through;
  margin-left: 8px;
}
</style>
